<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3d轮播图</title>
	<style>
		.wrap{
			width: 600px;
			height: 300px;
			margin:300px auto;
			perspective: 800px;
		}
		.wrap .box{
			width: 600px;
			height: 300px;
			position: relative;
			transition: all 2s;
			transform-style: preserve-3d;
		}
		.wrap .box div{
			width: 150px;
			height: 100px;
			position: absolute;
			top: 80px;
			left: 230px;
			/*opacity: 0.5;*/
		}
		.wrap .box .pic1{
			transform: translateZ(250px);
			background-color: red;
		}
		.wrap .box .pic2{
			transform: rotateY(40deg) translateZ(250px);
			background-color: orange;
		}
		.wrap .box .pic3{
			transform: rotateY(80deg) translateZ(250px);
			background-color: yellow;
		}
		.wrap .box .pic4{
			transform: rotateY(120deg) translateZ(250px);
			background-color: green;
		}
		.wrap .box .pic5{
			transform: rotateY(160deg) translateZ(250px);
			background-color: skyblue;
		}
		.wrap .box .pic6{
			transform: rotateY(200deg) translateZ(250px);
			background-color: blue;
		}
		.wrap .box .pic7{
			transform: rotateY(240deg) translateZ(250px);
			background-color: purple;
		}
		.wrap .box .pic8{
			transform: rotateY(280deg) translateZ(250px);
			background-color: black;
		}
		.wrap .box .pic9{
			transform: rotateY(320deg) translateZ(250px);
			background-color: grey;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="box">
			<div class="pic1 active"></div>
			<div class="pic2"></div>
			<div class="pic3"></div>
			<div class="pic4"></div>
			<div class="pic5"></div>
			<div class="pic6"></div>
			<div class="pic7"></div>
			<div class="pic8"></div>
			<div class="pic9"></div>
		</div>
	</div>

	<script>
		var box=document.getElementsByClassName('box')[0];
		var divs=box.getElementsByTagName('div');
		var t=setInterval(move,2000);
		var x=0;
		var index=0;
		function move(){
			if (index<=8) {
				index++
			}else{
				index=0;
			}
			x+=40;
			box.style.transform="rotateY("+x+"deg)";
		}
	</script>
</body>
</html>